﻿<div class="sample_title">Form</div>

code:
<div class="sample_code" rel="brush: js; html-script: false;">
    &lt;script type="text/javascript"&gt
        $(document).ready(function() {
            $('#form_master').setupForm([
                { name:'field1', /* Field Configuration */ },
                { name:'field2', /* Field Configuration */ },
                ...
                ...
            ]);
        });
    &lt;/script&gt;
        
    &lt;table class="tb_form" style="display:none;" cellpadding="0" cellspacing="0"&gt;
    &lt;tr&gt;
        &lt;td class="label"&gt;Field 1&lt;/td&gt;
        &lt;td&gt;&lt;input id="field1" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="label"&gt;Field 2&lt;/td&gt;
        &lt;td&gt;&lt;input id="field2" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
	...
	...
	&lt;/table&gt;
    <% for (int i = 0, max_i = 19; i < max_i; i++) { Response.Write("<br />"); } %>
</div><br />

<fieldset>
    <legend>Configuration</legend>
    <table class="tb_apiconfig">
    <tr>
        <td class="label">name <font color="red"><sup>*</sup></font></td>
        <td><font color="blue">(string)</font><br />
            Field Name will set target to object input id (must be unique)
        </td>
    </tr>
    <tr>
        <td class="label">value</td>
        <td><font color="blue">(string)</font><br />
            Set value of field
        </td>
    </tr>
    <tr>
        <td class="label">type</td>
        <td><font color="blue">(string) default: text</font><br />
            Set Type of field, option : [ text, textarea, numeric, date, lov, file ]
        </td>
    </tr>
    <tr>
        <td class="label">data</td>
        <td><font color="blue">(Array of Object)</font><br />
            Set field into combo/listbox, Object must be has key : <u>value</u> and <u>display</u>
        </td>
    </tr>
    <tr>
        <td class="label">precision</td>
        <td><font color="blue">(numeric) default: 0</font><br />
            Set Precision of number format (only used when <u>type</u> is <u>numeric</u>)
        </td>
    </tr>
    <tr>
        <td class="label">size</td>
        <td><font color="blue">(string/numeric) default: null</font><br />
            Set width size of input field, option : [ short, medium, long, <u>&lt;numeric value&gt;</u> ]
        </td>
    </tr>
    <tr>
        <td class="label">maxlength</td>
        <td><font color="blue">(string) default: null</font><br />
            Set Maximum Length Character of input field
        </td>
    </tr>
    <tr>
        <td class="label">cols</td>
        <td><font color="blue">(numeric) default: null</font><br />
            Set Columns Character of Textarea's Width (only used when <u>type</u> is <u>textarea</u>)
        </td>
    </tr>
    <tr>
        <td class="label">rows</td>
        <td><font color="blue">(numeric) default: null</font><br />
            Set Rows of Textarea's Height (only used when <u>type</u> is <u>textarea</u>)
        </td>
    </tr>
    <tr>
        <td class="label">noempty</td>
        <td><font color="blue">(boolean) default: false</font><br />
            Set no-empty rule of input field
        </td>
    </tr>
    <tr>
        <td class="label">readonly</td>
        <td><font color="blue">(boolean) default: false</font><br />
            Set readonly rule of input field
        </td>
    </tr>
    <tr>
        <td class="label">onKeyUp()</td>
        <td><font color="blue">(function)</font><br />
            Will be executed when key up
        </td>
    </tr>
    <tr>
        <td class="label">onKeyDown()</td>
        <td><font color="blue">(function)</font><br />
            Will be executed when key down
        </td>
    </tr>
    <tr>
        <td class="label">onChange()</td>
        <td><font color="blue">(function)</font><br />
            Will be executed when field changed
        </td>
    </tr>
    <tr>
        <td class="label">onFocus()</td>
        <td><font color="blue">(function)</font><br />
            Will be executed when focus into object field
        </td>
    </tr>
    <tr>
        <td class="label">onBlur</td>
        <td><font color="blue">(function)</font><br />
            Will be executed when blur from object field
        </td>
    </tr>
    <tr>
        <td class="label">onActionButton</td>
        <td><font color="blue">(function)</font><br />
            Will be executed when action button clicked (only used when <u>type</u> is <u>lov</u>)
        </td>
    </tr>
    <tr>
        <td class="label">onClearButton</td>
        <td><font color="blue">(function)</font><br />
            Will be executed when clear button clicked (only used when <u>type</u> is <u>lov</u>)
        </td>
    </tr>
    </table>
</fieldset>